import { FC, useState } from 'react';
import Child from './components/Child';
import { Button, Pagination } from 'antd';
// import { api1 } from '@/utils/api';
import { ListItemType } from './model/model';

// todo 引入css的时候，添加变量
// todo 可以有css的作用域，无法使用嵌套了
import styles from './index.less';

import { useSelector, useDispatch } from 'umi';

const Index: FC = () => {
  const [count, setCount] = useState<number>(5);

  const add = (num: number): void => {
    setCount((v) => v + num);
  };

  // useEffect((): void => {
  //   (async () => {
  //     const res = await api1({ a: 3 });
  //     console.log(res);
  //   })();
  // }, []);

  const count2: number = useSelector((state: any) => state.index.count2);
  const list: ListItemType[] = useSelector((state: any) => state.index.list);
  const dispatch = useDispatch();

  // useEffect(() => {
  //   dispatch({ type: 'index/load' });
  // }, []);

  return (
    <>
      <h2>ts</h2>
      <button>-</button>
      <span className={styles.font}>{count}</span>
      <button onClick={() => add(1)}>+</button>
      <Button type="primary" onClick={() => add(2)}>
        Primary Button
      </Button>

      <hr />

      <Child count={count} />

      <hr />

      <Pagination defaultCurrent={1} total={50} />

      <hr />
      <span>{count2}</span>
      <button onClick={() => dispatch({ type: 'index/increment' })}>+</button>

      <hr />

      {list.map((item) => (
        <div key={item.goodsId}>{item.goodsAddress}</div>
      ))}
    </>
  );
};

export default Index;
